import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  Alert,
  Button,
  TouchableOpacity,
} from 'react-native';
import LanguageDao, { FLAG_LANGUAGE } from '../../expand/dao/LanguageDao'
import CheckBox from 'react-native-check-box'
import ArrayUtil from '../../util/ArrayUtils'
import ViewUtils from '../../util/ViewUtils'
import { StackNavigator, TabNavigator } from 'react-navigation';

export default class CustomKeyPage extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: navigation.state.params.title,
    headerStyle: { backgroundColor: '#2196F3' },
    headerTitleStyle: { alignSelf: 'center', color: 'white' },
    gesturesEnabled: true,
  })

  constructor(props) {
    super(props);
    this.languageDao = new LanguageDao(this.props.navigation.state.params.flag);
  }

  state = {
    // 先把改变的值存到这个数组
    dataArray: [],
    changeValues: [],
  }

  componentDidMount() {
    this.loadData();
  }
  // 加载数据
  loadData() {
    this.languageDao.fetch()
      .then(result => {
        this.setState({
          dataArray: result
        })
        console.log(this.state.dataArray);
      })
      .catch(error => {
        console.log(error);
      })
  }

  // 显示数据
  renderView() {
    // 如果没数据返回Null
    if (!this.state.dataArray || this.state.dataArray.length === 0) return;
    let len = this.state.dataArray.length;
    // 存储所有的行
    let views = [];
    // 两个元素一组
    for (var i = 0, l = len - 2; i < l; i += 2) {
      views.push(
        <View key={i}>
          <View style={styles.item}>
            {this.renderCheckBox(this.state.dataArray[i])}
            {this.renderCheckBox(this.state.dataArray[i + 1])}
          </View>
          <View style={styles.line} />
        </View>
      )
    }
    views.push(
      <View key={len - 1}>
        <View style={styles.item}>
          {len % 2 === 0 ? this.renderCheckBox(this.state.dataArray[len - 2]) : null}
          {this.renderCheckBox(this.state.dataArray[len - 1])}
        </View>
      </View>
    )
    return views;
  }

  onClick(data) {
    // 选中被选中
    data.checked = !data.checked;
    // 修改数组
    ArrayUtil.saveArray(this.state.dataArray, data);
    // 保存数组
    this.languageDao.save(this.state.dataArray);
  }

  renderCheckBox(data) {
    let leftText = data.name;
    return (
      <CheckBox
        style={{ flex: 1, padding: 10 }}
        onClick={() => this.onClick(data)}
        leftText={leftText}
        isChecked={data.checked}
        checkedImage={<Image style={{ tintColor: '#6495ED' }}
          source={require('./img/ic_check_box.png')} />}
        unCheckedImage={<Image style={{ tintColor: '#6495ED' }}
          source={require('./img/ic_check_box_outline_blank.png')} />}
      />
    )
  }

  render() {
    return (
      <View>
        <ScrollView>
          {this.renderView()}
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  icon: {
    width: 22,
    height: 22
  },
  tips: {
    fontSize: 22,
  },
  line: {
    height: 1,
    backgroundColor: 'darkgray',
  },
  item: {
    flexDirection: 'row',
  }
})


